<template>
    <div>
        <el-form ref="form" label-width="120px" class="form">
            <el-form-item label="地址">
                <el-input v-model="address" placeholder="请填写地址"></el-input>
                <el-input v-model="room" placeholder="请填写详细地址"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="tel" placeholder="请填写联系电话"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="email" placeholder="请填写邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { getConfig, setConfig } from '@/api/api'
export default {
    data: function() {
        return {
            address: '',
            room: '',
            tel: '',
            email: '',
            tips: {
                address: '请填写地址',
                room: '请填写详细地址',
                tel: '请填写联系电话',
                email: '请填写邮箱',
            }
        }
    },
    created: function() {
        getConfig('address,room,tel,email').then(res => {
            console.log(res)
            this.address = res.address;
            this.room = res.room;
            this.tel = res.tel;
            this.email = res.email;
        })
    },
    methods: {
        save: function() {
            var addressObj = {
                address: this.address,
                room: this.room,
                tel: this.tel,
                email: this.email
            }
            for(var key in addressObj){
                if(addressObj[key] == ''){
                    this.$message({
                        message: this.tips[key],
                        type: 'error'
                    })
                    return;
                }
            }
            setConfig(addressObj).then(res => {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
            })
        }
    }
}
</script>
<style scoped>
.form .el-input {
    width: 400px;
}

.upload {
    display: inline-block;
}

.poster-thumb {
    width: 400px;
}
</style>